﻿<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s3-1/s3-1-bg.jpg');
            background-repeat: no-repeat;
            width: 1920px;
            height: 1080px;
        }
        em {
            color: #fff100;
            font-style: normal;
            font-size: 18pt;
            vertical-align: middle;
            margin-left: 5px;
        }

        .countText {
            color: #fff100;
            font-size: 42pt;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="container" style="height: 100%"></div>
    <div style="position: absolute; left:0; top: 0;">
        <button onclick="mapRange0080()">范围0-80</button>
        <button onclick="mapRange0040()">范围0-40</button>
        <button onclick="mapRange0020()">范围0-20</button>
        <button onclick="mapRange0010()">范围0-10</button>
        <button onclick="mapRange0005()">范围0-5</button>
        <button onclick="eventShowNone()">只显示热力图</button>
        <button onclick="eventShowCk()">显示仓库</button>
        <button onclick="eventShowDc()">显示堆场</button>
        <button onclick="eventShowMt()">显示码头</button>
        <button onclick="eventShowOrg()">显示组织</button>
    </div>
    <img src="./images/s3-1/label-count.png" style="position: absolute; left: 450px; top: 150px; display: none;"/>
    <div style="position:absolute; left:580px; top:130px; display:none;">
        <div><em class="countText" id="countCk">0</em><em>个</em></div>
        <div><em class="countText" id="countDc">0</em><em>个</em></div>
        <div style="margin-left:50px;"><em class="countText" id="countMt">0</em><em>个</em></div>
    </div>
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script type="text/javascript" src="assets/echarts.min.js"></script>
    <script type="text/javascript" src="assets/dataTool.min.js"></script>
    <script type="text/javascript" src="assets/china.js"></script>
    <script type="text/javascript" src="assets/echarts/map/jiangsu.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.local.js"></script>
    <script src="./content/s3-1-event.js"></script>
    <script src="./content/jzcode.sinotrans.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

        var g_provinceCount = null;


        function convertProvinceCountData() {
            var lData = [];
            for (var index = 0; index < g_provinceCount.names.length; index++) {
                lData.push({ name: g_provinceCount.names[index], value: g_provinceCount.values[index] });
            }
            return lData;
        }
		
		var g_provinceCountTop5Colors = ['#fe2020','#fe2a2a','#ff7e28','#fea41c','#ffd119','#ffff18','#b3e814','#1ed21e','#18d118','#43d943'];
		function convertProvinceCountTop5Data(data){
			var result = [];
			for(var index = 0; index < data.length; index++){
				result.push({value:data[index], 
					itemStyle:{
						normal:{
							color:g_provinceCountTop5Colors[index]
						}
					}});
			}
			return result;
		}
		function convertCompanyAreaTop10(data) {
		    var result = [];
		    for (var index = data.length - 1; index >=0; index--) {
		        result.push({
		            value: data[index],
		            itemStyle: {
		                normal: {
		                    color: g_provinceCountTop5Colors[index]
		                }
		            }
		        });
		    }
		    return result;
		}

		var g_topDcColor = ['#ff0000', '#ff2f2f', '#ff4b4b', '#eb6100', '#ff9000', '#a8ff00', '#8fc31f', '#4dae0e', '#00a866', '#088353'];
		function convertTopDc(data) {
		    var result = [];
		    for (var index = 0; index < data.xValues.length; index++) {
		        result.push({
		            value: 10,
		            name: data.xValues[index] + ':' + data.yValues[index]+'TEU/吨',
		            labelLine: {
		                normal:{
		                    show:false
		                }
		            },
		            itemStyle: {
		                normal: {
		                    color: 'rgba(222,0,0,0)',//g_topDcColor[index],
                            borderWidth:0
		                }
		            }});
		    }
		    result.push({
		        value: 9.8, name: '',
		        labelLine: {
		            normal: {
		                show: false
		            }
		        },
		        itemStyle: {
		            normal: {
		                color: 'rgba(222,0,0,0)',//g_topDcColor[index],
		                borderWidth: 0
		            }
		        }
		    });
		    result.push({
		        value: 9.9, name: '',
		        labelLine: {
		            normal: {
		                show: false
		            }
		        },
		        itemStyle: {
		            normal: {
		                color: 'rgba(222,0,0,0)',//g_topDcColor[index],
		                borderWidth: 0
		            }
		        }
		    });
		    return result;
		}

        var g_s3MapDcData = null;
        var g_s3MapCkData = null;
        var g_s3MapMtData = null;
        var g_s3MapOrgData = null;
        var g_seriesCk = {
            name: '全国仓库',
            type: 'scatter',
            symbol: 'image://./images/s3-1/icon-ck.png',
            symbolSize: [24, 39],
            symbolOffset: [-12, -19],
            geoIndex: 0,
            coordinateSystem: 'geo',
            data: [],
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    //borderColor: '#fff',
                    color: '#0F0',
                }
            }
        };
        var g_seriesDc = {
            name: '全国堆场',
            type: 'scatter',
            symbol: 'image://./images/s3-1/icon-dc.png',
            symbolSize: [24, 39],
            symbolOffset: [-12, -19],
            geoIndex: 0,
            coordinateSystem: 'geo',
            data: [],
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    //borderColor: '#fff',
                    color: '#F0F',
                }
            }
        };
        var g_seriesMt = {
            name: '全国码头',
            type: 'scatter',
            symbol: 'image://./images/s3-1/icon-mt.png',
            symbolSize: [24, 39],
            symbolOffset: [-12, -19],
            geoIndex: 0,
            coordinateSystem: 'geo',
            data: [],
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    //borderColor: '#fff',
                    color: '#F00',
                }
            }
        };
        var g_seriesOrg = {
            name: '全国机构',
            type: 'scatter',
            symbol: 'image://./images/s3-1/icon-org.png',
            symbolSize: [58, 32],
            geoIndex: 0,
            coordinateSystem: 'geo',
            data: [],
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    //borderColor: '#fff',
                    color: '#F00',
                }
            }
        };

        $.get(jzcode.data.getUrl('./data/data-s3-province.json'), function (s3ProvinceJson) {
            $.get(jzcode.data.getUrl('./data/s3-province-count-top10.json'), function (s3ProvinceTop10Json) {
                $.get(jzcode.data.getUrl('./data/s3-1-top10-mt.json'), function (s3CompanyAreaTop10Json) {
                    $.get(jzcode.data.getUrl('./data/s3-company-area-top10.json'), function (s3TopCkJson) {//
                        $.get(jzcode.data.getUrl('./data/s3-map-mt.json'), function (s3MapMtJson) {
                            $.get(jzcode.data.getUrl('./data/s3-map-dc.json'), function (s3MapDcJson) {
                                $.get(jzcode.data.getUrl('./data/s3-map-ck.json'), function (s3MapCkJson) {
                                    $.get(jzcode.data.getUrl('./data/s3-map-org.json'), function (s3MapOrgJson) {
                                        $.get(jzcode.data.getUrl('./data/s3-1-top10-dc.json'), function (s3MapTop10DcJson) {
                                            g_provinceCount = s3ProvinceJson;
                                            g_s3MapDcData = s3MapDcJson;
                                            g_s3MapMtData = s3MapMtJson;
                                            g_s3MapCkData = s3MapCkJson;
                                            g_s3MapOrgData = s3MapOrgJson;

                                            //$('#countCk').html(g_s3MapCkData.mapData.length);
                                            //$('#countDc').html(g_s3MapDcData.mapData.length);
                                            //$('#countMt').html(g_s3MapMtData.mapData.length);
                                            option = {
                                                title: {
                                                    text: '',
                                                    subtext: '',
                                                    sublink: '#',
                                                    left: 'center',
                                                    top: 5,
                                                    itemGap: 0,
                                                    textStyle: {
                                                        color: '#577ceb'
                                                    }
                                                },
                                                brush: {
                                                    geoIndex: 0,
                                                    brushLink: 'all',
                                                    inBrush: {
                                                        opacity: 1
                                                    },
                                                    outOfBrush: {
                                                        color: '#b99e2a',
                                                        symbolSize: 4,
                                                        opacity: 0.1
                                                    }
                                                },
                                                graphic: {
                                                    elements: [{
                                                        id: 'layer-case0-bg',
                                                        type: 'image',
                                                        left: 1300,
                                                        top: 0,
                                                        style: {
                                                            image: './images/s3-1/s3-1-case0-bg.png'
                                                        },
                                                        z: 3
                                                    }, {
                                                        id: 'layer-map-legend',
                                                        type: 'image',
                                                        left: 140,
                                                        top: 910,
                                                        style: {
                                                            image: './images/s3-1/s3-1-map-legend.png'
                                                        },
                                                        z: 3
                                                    }, {
                                                        type: 'image',
                                                        left: 1330,
                                                        top: 785,
                                                        style: {
                                                            image: './images/s3-1/s3-1-chart-bg.png'
                                                        },
                                                        z: 3
                                                    }]
                                                },
                                                geo: [{
                                                    map: 'china',
                                                    silent: true,
                                                    label: {
                                                        emphasis: {
                                                            show: false,
                                                            areaColor: '#eee'
                                                        }
                                                    },
                                                    itemStyle: {
                                                        normal: {
                                                            areaColor: 'rgba(128, 128, 128, 0.1)',
                                                            borderColor: '#000',
                                                            borderWidth: 1,
                                                            color: '#fff',
                                                            shadowColor: '#000',
                                                            shadowBlur: 20
                                                        }
                                                    },
                                                    left: 90,
                                                    top: 130,
                                                    bottom: 130,
                                                    right: '36%',
                                                    roam: false
                                                }
                                                //,
                                                //{
                                                //    map: '江苏',
                                                //    silent: true,
                                                //    label: {
                                                //        emphasis: {
                                                //            show: false,
                                                //            areaColor: '#eee'
                                                //        }
                                                //    },
                                                //    itemStyle: {
                                                //        normal: {
                                                //            areaColor: '#fff',
                                                //            borderColor: '#000',
                                                //            borderWidth: 1,
                                                //            color: '#fff',
                                                //            shadowColor: '#000',
                                                //            shadowBlur: 0
                                                //        }
                                                //    },
                                                //    left: 1420,
                                                //    top: 790,
                                                //    bottom: 50,
                                                //    right: 180,
                                                //    roam: false
                                                //}
                                                ],
                                                grid: [
                                                    { x: 1350, y: 80, width: 500, height: 210, containLabel: false },
                                                    { x: 1300, y: 435, width: 500, height: 250, containLabel: true }
                                                ],
                                                xAxis: [{
                                                    gridIndex: 0,
                                                    data: s3TopCkJson.xValues,
                                                    axisLine: { onZero: false },
                                                    splitLine: { show: false },
                                                    splitArea: { show: false },
                                                    axisLabel: {
                                                        textStyle: { color: '#eee' },
                                                        interval: 0,
                                                        rotate: -30
                                                        ,
                                                        formatter: function (value, index) {
                                                            if(value.length > 7){
                                                                var cur = 0;
                                                                var newValue = '';
                                                                while (cur < value.length) {
                                                                    if (cur + 7 > value.length) {
                                                                        newValue += value.substring(cur, value.length);
                                                                    } else {
                                                                        newValue += value.substring(cur, cur + 7);
                                                                        newValue += '\r\n';
                                                                    }
                                                                    cur += 7;
                                                                }
                                                                return newValue;
                                                            } else {
                                                                return value;
                                                            }
                                                        }
                                                    }
                                                }, {
                                                    gridIndex: 1,
                                                    axisLine: { onZero: false },
                                                    splitLine: { show: false },
                                                    splitArea: { show: false },
                                                    axisLabel: {
                                                        textStyle: { color: '#eee' }
                                                    }
                                                }],
                                                yAxis: [{
                                                    gridIndex: 0,
                                                    show: false,
                                                    splitArea: { show: false },
                                                    axisLabel: {
                                                        show: false,
                                                        textStyle: { color: '#eee' }
                                                    },
                                                    axisLine: {
                                                        show: false,
                                                        lineStyle: {
                                                            color: '#eee'
                                                        }
                                                    },
                                                    splitLine: {
                                                        show: false,
                                                        lineStyle: {
                                                            opacity: 0.4
                                                        }
                                                    }
                                                }, {
                                                    gridIndex: 1,
                                                    show: true,
                                                    type: 'category',
                                                    data: s3CompanyAreaTop10Json.xValues,
                                                    splitArea: { show: false },
                                                    axisLabel: {
                                                        show: true,
                                                        interval: 0,
                                                        rotate: -30,
                                                        textStyle: { color: '#eee' }
                                                    },
                                                    axisLine: {
                                                        show: false,
                                                        lineStyle: {
                                                            color: '#eee'
                                                        }
                                                    },
                                                    splitLine: {
                                                        show: false,
                                                        lineStyle: {
                                                            opacity: 0.4
                                                        }
                                                    }
                                                }],
                                                visualMap: [{
                                                    min: 0,
                                                    max: 80,
                                                    range: [0, 80],
                                                    left: 'left',
                                                    top: 'bottom',
                                                    text: ['高', '低'],           // 文本，默认为数值文本
                                                    calculable: true,
                                                    orient: 'horizontal',
                                                    itemWidth: 20,
                                                    itemHeight: 210,
                                                    show: true,
                                                    seriesIndex: 0,
                                                    inRange: {
                                                        color: ['#FFeeee', '#3cb058', '#158030', '#b17411', '#ff6e02']
                                                    },
                                                    outRange: {
                                                        color: ['white']
                                                    },
                                                    left: 140,
                                                    top: 840,
                                                    textStyle: {
                                                        color: '#fff'
                                                    }
                                                }],
                                                series: [
                                                    {
                                                        name: 'iphone3',
                                                        type: 'map',
                                                        //geoIndex: 0,
                                                        mapType: 'china',
                                                        left: 90,
                                                        top: 130,
                                                        bottom: 130,
                                                        right: '36%',
                                                        roam: false,
                                                        label: {
                                                            normal: {
                                                                show: true,
                                                                textStyle: {
                                                                    color: '#555577',
                                                                    fontSize: 20
                                                                },
                                                                formatter: function (value, index) {
                                                                    return value.name;
                                                                }
                                                            },
                                                            emphasis: {
                                                                show: true
                                                            }
                                                        },
                                                        itemStyle: {
                                                            normal: {
                                                                borderColor: 'rgba(0,0,10,0.2)',
                                                                borderWidth: 1
                                                            }
                                                        },
                                                        data: convertProvinceCountData()
                                                    }, g_seriesOrg, g_seriesCk, g_seriesDc, g_seriesMt
                                                    //,
                                                    //{
                                                    //    name: '江苏仓库',
                                                    //    type: 'effectScatter',
                                                    //    rippleEffect: {
                                                    //        brushType: 'stroke',
                                                    //        scale: 5.0
                                                    //    },
                                                    //    geoIndex: 1,
                                                    //    coordinateSystem: 'geo',
                                                    //    symbolSize: 5,
                                                    //    data: s3MapProvinceTopJson.mapData,
                                                    //    label: {
                                                    //        normal: {
                                                    //            formatter: '{b}',
                                                    //            position: 'right',
                                                    //            show: false
                                                    //        },
                                                    //        emphasis: {
                                                    //            show: true
                                                    //        }
                                                    //    },
                                                    //    itemStyle: {
                                                    //        normal: {
                                                    //            //borderColor: '#fff',
                                                    //            color: '#f00',
                                                    //        }
                                                    //    }
                                                    //}
                                                    //,
                                                    //{
                                                    //    name: 'topProvince',
                                                    //    type: 'map',
                                                    //    //geoIndex: 0,
                                                    //    mapType: '江苏',
                                                    //    left: 1420,
                                                    //    top: 790,
                                                    //    bottom: 50,
                                                    //    right: 180,
                                                    //    roam: false,
                                                    //    label: {
                                                    //        normal: {
                                                    //            show: true
                                                    //        },
                                                    //        emphasis: {
                                                    //            show: true
                                                    //        }
                                                    //    },
                                                    //    data: convertProvinceCountData()
                                                    //}
                                                    ,
                                                    {
                                                        name: '生活费',
                                                        type: 'bar',
                                                        xAxisIndex: 0,
                                                        yAxisIndex: 0,
                                                        label: {
                                                            normal: {
                                                                show: false,
                                                            }
                                                        },
                                                        data: convertProvinceCountTop5Data(s3TopCkJson.yValues)
                                                    }, {
                                                        name: '公司仓库面积TOP10',
                                                        type: 'bar',
                                                        xAxisIndex: 1,
                                                        yAxisIndex: 1,
                                                        label: {
                                                            normal: {
                                                                show: false,
                                                            }
                                                        },
                                                        data: convertCompanyAreaTop10(s3CompanyAreaTop10Json.yValues)
                                                    }
                                                    ,
                                                    {
                                                        name: '漏斗图',
                                                        type: 'funnel',
                                                        left: 1380,
                                                        top: 740,
                                                        width: 220,
                                                        height: 260,
                                                        //min: 0,
                                                        //max: 100,
                                                        minSize: '0%',
                                                        maxSize: '100%',
                                                        sort: 'ascending',
                                                        gap: 0,
                                                        label: {
                                                            normal: {
                                                                show: true,
                                                                position: 'right',
                                                                textStyle: {
                                                                    color: '#fff'
                                                                }
                                                            },
                                                            emphasis: {
                                                                textStyle: {
                                                                    fontSize: 20
                                                                }
                                                            }
                                                        },
                                                        data: convertTopDc(s3MapTop10DcJson)
                                                    }
                                                ]
                                            };

                                            g_seriesCk.data = g_s3MapCkData.mapData;
                                            g_seriesDc.data = g_s3MapDcData.mapData;
                                            g_seriesMt.data = g_s3MapMtData.mapData;
                                            g_seriesOrg.data = g_s3MapOrgData.mapData;
                                            if (option && typeof option === "object") {
                                                myChart.setOption(option, true);
                                            }
                                        }, 'json');
                                    }, 'json');
                                }, 'json');
                            }, 'json');
                        }, 'json');
                    }, 'json');
                }, 'json');
            }, 'json');
        }, 'json');

        register();
    </script>
</body>
</html>